<my-pageheader></my-pageheader>

<mat-card style="margin: 20px 20px 50px 20px">
    <h2 align="center">艺术字体生成</h2>
    <h5 align="center">模型来源：<a href="https://github.com/TAMU-VITA/ShapeMatchingGAN"  target="_blank"> 北大王选计算机所杨帅</a></h5>
    <br><br>
    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <mat-form-field >
                <mat-select placeholder="字体风格" [(ngModel)]="style">
                    <mat-option value="fire">
                        火焰
                    </mat-option>
                    <mat-option value="ample">
                        枫叶
                    </mat-option>
                    <mat-option value="smoke">
                        炊烟
                    </mat-option>
                    <mat-option value="water">
                        水滴
                    </mat-option>
                </mat-select>
            </mat-form-field>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <mat-checkbox color="primary" [(ngModel)]="scale">
                自定义漂移等级
            </mat-checkbox>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <mat-form-field *ngIf="scale">
                <input matInput [(ngModel)]="scale_step" type="number" placeholder="漂移等级步长" min="1" max="10">
            </mat-form-field>

            <br><br><br>
            <mat-form-field>
                <input matInput [(ngModel)]="word" type="text" placeholder="汉字或字符" maxlength="1" style="font-size: 80px">
            </mat-form-field>
        </mat-card>
    </div>
    <br>
    <div class="row justify-content-center">
        <button mat-raised-button color="primary" (click)="transfer()" [disabled]="sending || !word || scale_step < 1 || scale_step > 10">
            生成艺术字体
        </button>
    </div>
    <br>
    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <div class="row" *ngIf="!error && ! sending">
                <mat-card *ngFor="let result of results" class="pull-right" style="max-width: 320px; max-height: 320px; margin: 10px">
                    <img mat-card-image src="{{result}}">
                </mat-card>
            </div>

            <div *ngIf="error">
                出错啦...
            </div>

            <div *ngIf="sending">
                正在努力计算...
            </div>
            <mat-spinner *ngIf="sending"></mat-spinner>
        </mat-card>
    </div>
</mat-card>

